import { GlobalStyles } from '@mui/material';
import { alpha } from '@mui/material/styles';
import { theme } from './theme';

export const globalStyles = (
  <GlobalStyles
    styles={{
      '*': {
        margin: 0,
        padding: 0,
        boxSizing: 'border-box',
      },
      html: {
        WebkitFontSmoothing: 'antialiased',
        MozOsxFontSmoothing: 'grayscale',
        height: '100%',
        width: '100%',
      },
      body: {
        height: '100%',
        width: '100%',
        fontFamily: theme.typography.fontFamily,
        backgroundColor: theme.palette.background.default,
        color: theme.palette.text.primary,
      },
      '#root': {
        height: '100%',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
      },
      '.app-scrollbar': {
        '&::-webkit-scrollbar': {
          width: '8px',
          height: '8px',
        },
        '&::-webkit-scrollbar-track': {
          backgroundColor: 'transparent',
        },
        '&::-webkit-scrollbar-thumb': {
          backgroundColor: alpha(theme.palette.text.secondary, 0.3),
          borderRadius: '4px',
          '&:hover': {
            backgroundColor: alpha(theme.palette.text.secondary, 0.5),
          },
        },
      },
      '.fade-in': {
        animation: 'fadeIn 0.3s ease-in-out',
      },
      '.slide-in-right': {
        animation: 'slideInRight 0.3s ease-in-out',
      },
      '.slide-in-left': {
        animation: 'slideInLeft 0.3s ease-in-out',
      },
      '.slide-in-up': {
        animation: 'slideInUp 0.3s ease-in-out',
      },
      '.slide-in-down': {
        animation: 'slideInDown 0.3s ease-in-out',
      },
      '@keyframes fadeIn': {
        from: {
          opacity: 0,
        },
        to: {
          opacity: 1,
        },
      },
      '@keyframes slideInRight': {
        from: {
          transform: 'translateX(100%)',
          opacity: 0,
        },
        to: {
          transform: 'translateX(0)',
          opacity: 1,
        },
      },
      '@keyframes slideInLeft': {
        from: {
          transform: 'translateX(-100%)',
          opacity: 0,
        },
        to: {
          transform: 'translateX(0)',
          opacity: 1,
        },
      },
      '@keyframes slideInUp': {
        from: {
          transform: 'translateY(100%)',
          opacity: 0,
        },
        to: {
          transform: 'translateY(0)',
          opacity: 1,
        },
      },
      '@keyframes slideInDown': {
        from: {
          transform: 'translateY(-100%)',
          opacity: 0,
        },
        to: {
          transform: 'translateY(0)',
          opacity: 1,
        },
      },
      // 表格样式
      '.data-table': {
        '& .MuiTableCell-root': {
          borderBottom: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
        },
        '& .MuiTableHead-root': {
          '& .MuiTableCell-root': {
            backgroundColor: alpha(theme.palette.primary.main, 0.05),
            fontWeight: 600,
            color: theme.palette.text.primary,
          },
        },
      },
      // 表单样式
      '.form-container': {
        '& .MuiFormControl-root': {
          marginBottom: theme.spacing(2),
        },
        '& .form-actions': {
          display: 'flex',
          justifyContent: 'flex-end',
          gap: theme.spacing(1),
          marginTop: theme.spacing(3),
          paddingTop: theme.spacing(2),
          borderTop: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
        },
      },
      // 卡片网格样式
      '.card-grid': {
        display: 'grid',
        gap: theme.spacing(3),
        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
        '& .card-item': {
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
        },
      },
      // 状态样式
      '.status-active': {
        color: theme.palette.success.main,
        backgroundColor: alpha(theme.palette.success.main, 0.1),
        padding: '4px 8px',
        borderRadius: '12px',
        fontSize: '0.75rem',
        fontWeight: 500,
        textAlign: 'center',
        minWidth: '60px',
      },
      '.status-inactive': {
        color: theme.palette.error.main,
        backgroundColor: alpha(theme.palette.error.main, 0.1),
        padding: '4px 8px',
        borderRadius: '12px',
        fontSize: '0.75rem',
        fontWeight: 500,
        textAlign: 'center',
        minWidth: '60px',
      },
      '.status-suspended': {
        color: theme.palette.warning.main,
        backgroundColor: alpha(theme.palette.warning.main, 0.1),
        padding: '4px 8px',
        borderRadius: '12px',
        fontSize: '0.75rem',
        fontWeight: 500,
        textAlign: 'center',
        minWidth: '60px',
      },
      '.status-locked': {
        color: theme.palette.text.secondary,
        backgroundColor: alpha(theme.palette.text.secondary, 0.1),
        padding: '4px 8px',
        borderRadius: '12px',
        fontSize: '0.75rem',
        fontWeight: 500,
        textAlign: 'center',
        minWidth: '60px',
      },
      // 工具提示样式
      '.MuiTooltip-tooltip': {
        backgroundColor: theme.palette.grey[800],
        color: theme.palette.common.white,
        fontSize: '0.75rem',
        borderRadius: '6px',
        padding: '8px 12px',
      },
      // 加载状态样式
      '.loading-overlay': {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: alpha(theme.palette.background.paper, 0.8),
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
      },
      // 错误状态样式
      '.error-state': {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: theme.spacing(4),
        textAlign: 'center',
        color: theme.palette.text.secondary,
        '& .error-icon': {
          fontSize: '4rem',
          marginBottom: theme.spacing(2),
          color: theme.palette.error.main,
        },
        '& .error-title': {
          fontSize: '1.25rem',
          fontWeight: 500,
          marginBottom: theme.spacing(1),
          color: theme.palette.text.primary,
        },
        '& .error-message': {
          fontSize: '0.875rem',
          marginBottom: theme.spacing(2),
        },
      },
      // 空状态样式
      '.empty-state': {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: theme.spacing(4),
        textAlign: 'center',
        color: theme.palette.text.secondary,
        '& .empty-icon': {
          fontSize: '4rem',
          marginBottom: theme.spacing(2),
          color: theme.palette.text.disabled,
        },
        '& .empty-title': {
          fontSize: '1.25rem',
          fontWeight: 500,
          marginBottom: theme.spacing(1),
          color: theme.palette.text.primary,
        },
        '& .empty-message': {
          fontSize: '0.875rem',
          marginBottom: theme.spacing(2),
        },
      },
    }}
  />
);

export default globalStyles;